import React from "react";
import { createOptions } from "./data-transfer.service"
import { messages } from "share/common";
import CONSTANTS from "share/constants";
import 'styles/budget/budget-balance/budget-balance-chart.scss';
import { Tooltip } from "antd";

const { CurrencyCode } = CONSTANTS;

class BudgetBalanceChart extends React.Component {
  constructor(props) {
    super(props);
    this.chartInstance = null;
  }

  getOptions = () => {
    const { bgtAmount } = this.props.dataSource;
    return bgtAmount !== undefined ? createOptions(this.props.dataSource) : undefined;
  };

  componentDidMount() {
    this.drawChart();
  }

  componentDidUpdate() {
    this.drawChart();
  }

  componentWillUnmount() {
    this.chartInstance.dispose();
  }

  drawChart() {
    const node = this.refs.chart;
    const chart = echarts.getInstanceByDom(node);
    if (!chart) {
      this.chartInstance = echarts.init(node, "helios");
    }
    const options = this.getOptions();
    if (options && this.chartInstance) {
      this.chartInstance.setOption(options);
    }
  }

  renderToolTipList = (dataSource) => {
    const { currency } = dataSource;
    const KEY_MAP = {
      'bgtAmount': {
        color: '#fff',
        text: messages('expense-11.key1')/*预算额*/
      },
      'expReserveAmount': {
        color: '#4b8dff',
        text: messages('expense-11.key3')/*保留额*/
      },
      'expUsedAmount': {
        color: '#4dc690',
        text: messages('expense-11.key4')/*发生额*/
      },
      'expAvailableAmount': {
        color: '#ddd',
        text: messages('expense-11.key30')/*可用额*/
      }
    };
    return Object.keys(KEY_MAP).map(key => {
      let current = KEY_MAP[key];
      let { color, text } = current;
      text = `${text} | ${CurrencyCode[currency]}${this.filterMoney(dataSource[key], undefined, true)}`;

      return (
        <div className="tooltip">
          <span className="tooltip-circle" style={{ background: color }}>
          </span>
          <span className="tooltip-content">
            {text}
          </span>
        </div>
      )
    });
  };

  renderLabelsList = (dataSource) => {
    const { dimensionList } = this.props
    const LABELS_LIST_MAP = {
      'companyName': messages('expense-11.key8')/*公司*/,
      'companyGroupName': messages('expense-11.key31')/*公司组*/,
      'unitName': messages('common.department')/*部门*/,
      'unitGroupName': messages('expense-11.key32')/*部门组*/,
      'employeeName': messages('expense-11.key33')/*员工*/,
      'employeeGroupName': messages('expense-11.key34')/*员工组*/,
      'itemTypeName': messages('expense-11.key35')/*预算项目类型*/,
      'itemName': messages('expense-11.key13')/*预算项目*/,
      'itemGroupName': messages('expense-11.key36')/*预算项目组*/,
    };
    let labelList = []
    Object.keys(LABELS_LIST_MAP).map(key => { // 预算相关和组织架构相关的固定map
      let value = dataSource[key] || '';
      let name = LABELS_LIST_MAP[key] || 'default';
      if (value) {
        labelList.push({ value: value, name: name })
      }
    });
    dimensionList.map(dimension => { // 维度相关的成本中心的非固定map
      labelList.push({ value: dataSource[dimension.value], name: dimension.name })
    });

    return labelList.map(label => (
      <div className="label-container">
        <div className="label-name">
          {label.name}
        </div>
        <div className="label-content">
          <Tooltip placement="topLeft" title={label.value}>{label.value}</Tooltip>
        </div>
      </div>
    ))
  };

  render() {
    const { width, dataSource } = this.props;
    const canvasWidth = width / 2;
    const canvasHeight = width / 2;
    return (
      <div className="budget-balance-chart" style={{ width }}>
        <div className="chart-wrapper">
          <div
            className="chart-container"
            ref="chart"
            style={{ width: canvasWidth, height: canvasHeight }}>
          </div>
          <div
            className="chart-tooltip"
            style={{ width: canvasWidth, height: canvasHeight }}>
            {this.renderToolTipList(dataSource)}
          </div>
        </div>
        <div className="labels-wrapper">
          {this.renderLabelsList(dataSource)}
        </div>
      </div>
    )
  }
}

BudgetBalanceChart.contextType = {
  dataSource: React.PropTypes.object,
  dimensionList: React.PropTypes.array,
  width: React.PropTypes.number,
};

BudgetBalanceChart.defaultProps = {
  width: 400,
};

export default BudgetBalanceChart
